<template>
  <div>
    <van-nav-bar title="影院" fixed left-arrow @click-left="onClickLeft" @click-right="onClickRight">
      <template #left>
        <router-link class="" :to="{ name: 'city' }" tag="div">
          <h6>北京</h6>
        </router-link>
        <van-icon name="arrow-down" size="0.3rem" />
      </template>
      <template #right>
        <router-link class="" :to="{ name: 'searchCinema' }" tag="div">
          <van-icon name="search" size="1.5rem" />
        </router-link>
      </template>
    </van-nav-bar>
    <div class="cinema">
      <div class="my-4 mx-2" v-for="(cinema, index) in cinemas" :key="index">
        <div class="row">
          <div class="col-9">{{ cinema.name }}</div>
          <div class="col-3 text-right text-danger">${{ cinema.lowPrice / 100 }}<small>起</small></div>
          <div class="text-muted col-9 text-truncate">
            <small>{{ cinema.address }}</small>
          </div>
          <div class="text-muted col-3 text-right"><small>距离未知</small></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import maizuo from '../utils/axiosMaiZuo';
// import maizuo from 'axios';
import Vue from 'vue';
import { NavBar, Toast, Icon } from 'vant';
import BetterScroll from '@better-scroll/core';
import Pullup from '@better-scroll/pull-up';
Vue.use(NavBar, BetterScroll);
Vue.use(Icon);
BetterScroll.use(Pullup);

export default {
  // components: { NavBar, BetterScroll },
  data() {
    return {
      cinemas: null,
      height: 0,
    };
  },
  methods: {
    onClickLeft() {
      Toast('返回');
    },
    onClickRight() {
      Toast('按钮');
    },
  },
  mounted() {
    this.height = document.documentElement.clientHeight - 350 + 'px';
    maizuo({
      url: 'https://m.maizuo.com/gateway?cityId=310100&ticketFlag=1&k=8613884',
      headers: {
        'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"16203912355341023760809985","bc":"310100"}',
        'X-Host': 'mall.film-ticket.cinema.list',
      },
    }).then((res) => {
      this.cinemas = res.data.data.cinemas;
      this.$nextTick(() => {
        new BetterScroll('.cinema', {
          // scrollBar: true,
          // wheel: true,
          // pullUpLoad: true,
        });
      });
    });
  },
};
</script>

<style scoped>
.cinema {
  height: 50%;
  overflow: hidden;
}
</style>
